<template>
	<view class="pore">
		<view class="station-tabs">
			<view class="station-tabs-content">
				<view v-for="(item, index) in stations" :key="index"
					:class="['station-item', {'active': curIndex === index}]" @tap="handleSelectStation(item, index)">
					{{ item.name }}
				</view>
				<view class="station-filter-btn" @tap="showFilter = true">
					筛选
					<image style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
						src="https://hxs.dsjhs.com:553/prod-api/profile/xiajiantou.png" mode=""></image>
				</view>
				<image class="mask" src="https://hxs.dsjhs.com:553/prod-api/profile/zhezhao.png" mode=""></image>
			</view>
		</view>
		<view v-if="showFilter" class="filter-modal">
			<view class="filter-header">
				<text>服务筛选</text>
				<u-icon name="close" @tap="showFilter = false"></u-icon>
			</view>
			<view class="filter-options">
				<view v-for="(item, idx) in stations" :key="idx"
					:class="['filter-option', { active: curIndex === idx }]" @tap="selectFilter(item, idx)">
					{{ item.name }}
				</view>
			</view>

		</view>
		<!-- <u-overlay :show="showFilter" @click="showFilter = false"></u-overlay> -->
	</view>
</template>

<script>
	export default {
		name: 'StationTabs',
		props: {
			stations: {
				type: Array,
				default: () => []
			},
			tabIndex: {
				type: [Number, String],
				default: 0
			},
			// filterOptions: {
			// 	type: Array,
			// 	default: () => []
			// }
		},
		created() {
			this.curIndex = Number(this.tabIndex) || 0
			console.log(this.tabIndex, 'this.tabIndex')
		},
		data() {
			return {
				curIndex: 0,
				showFilter: false,
				selectedFilter: 0
			}
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					this.curIndex = Number(newVal) || 0
					console.log('tabIndex changed:', newVal, 'curIndex:', this.curIndex)
				},
				immediate: true
			}
		},
		methods: {
			handleSelectStation(item, index) {
				this.curIndex = index;
				this.$emit('station-change', item, index);
				console.log(this.filterOptions, 'filterOptions')
			},
			selectFilter(item, idx) {
				// this.selectedFilter = idx;
				this.curIndex = idx;
				this.$emit('filter-change', item, idx);
				this.showFilter = false;
			}
		}
	}
</script>

<style lang="scss">
	.station-tabs {
		width: 100%;
		margin-top: 20rpx;
		overflow: hidden;

		.station-tabs-content {
			position: relative;
			display: flex;
			flex-wrap: nowrap;
			padding: 24rpx 0 32rpx 0;
			white-space: nowrap;
		}

		.station-item {
			position: relative;
			margin-right: 30rpx;
			padding: 0 10rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: rgba(52, 49, 79, 0.4);
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
			white-space: nowrap;
			flex-shrink: 0;

			&::after {
				position: absolute;
				bottom: -4rpx;
				left: 0;
				display: block;
				width: 100%;
				height: 8rpx;
				background: transparent;
				content: '';
			}

			&.active {
				font-weight: 600;
				font-size: 16px;
				color: #0B0F12;
				line-height: 22px;
				text-align: center;
				font-style: normal
			}
		}

		.station-item.active::after {
			background: #FFDE6D;
		}
	}

	.station-filter-btn {
		position: absolute;
		right: -4rpx;
		top: 10rpx;
		width: 144rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 20px;
		display: flex;
		align-items: center;
		color: #34314F;
		font-size: 28rpx;
		margin-left: 20rpx;
		cursor: pointer;
		padding-left: 32rpx;
		box-sizing: border-box;
		z-index: 999;


		// &::before {
		// 	content: '';
		// 	width: 112rpx;
		// 	height: 68rpx;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	background: url('https://hxs.dsjhs.com:553/prod-api/profile/zhezhao.png') no-repeat center;
		// 	background-size: cover;
		// }
	}

	.mask {
		position: absolute;
		top: 4rpx;
		right: 116rpx;
		width: 112rpx;
		height: 68rpx;

		background: url('https://hxs.dsjhs.com:553/prod-api/profile/zhezhao.png') no-repeat center;
		background-size: cover;
	}

	.filter-modal {
		position: absolute;
		top: 96rpx;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;
		padding: 30rpx 32rpx 64rpx 32rpx;


		.filter-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.filter-options {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.filter-option {
				padding: 18rpx 26rpx;
				border-radius: 16rpx;
				background: #fff;
				color: #34314F;
				font-size: 28rpx;
				box-sizing: border-box;
				line-height: 20px;
				text-align: center;
				font-style: normal;
				border: 1px solid rgba(52, 49, 79, 0.13);

				&.active {
					background: #21B9AD;
					color: #fff;
					border: 1px solid #21B9AD;
				}
			}
		}
	}
</style>